<template>
  <div class="details">
    <div class="middle">
      <div class="head">
        <p>{{orderList.title}}</p>
        <div>
          <p>{{orderList.name}}</p>
        </div>
      </div>
      <h2 v-if="orderList.language">文档语言：{{orderList.language}}</h2>
      <h2  v-if="orderList.word_count">字数：{{orderList.word_count}}</h2>
      <!-- <h3>相似指数：{{orderList.title}}</h3> -->
      <h1>服务内容</h1>
      <!-- <h2 v-if="orderList.title">修改剽窃抄袭部分</h2> -->
      <h2 v-if="orderList.service">文档翻译：中文翻译成英文</h2>
      <h2 v-if="orderList.chart>0">图标制作：{{orderList.chart}}</h2>
      <h2 v-if="orderList.format">文稿全文排版</h2>
      <h2 v-if="orderList.recommend">杂志推荐：3个</h2>
      <h1 v-if="orderList.title">文章标题 : {{orderList.title}}</h1>
      <h2 v-if="detail"><div v-if="detail.style">英文风格 : {{detail.style==1?'美式':'英式'}}</div></h2>
      <h2 v-if="detail"><div v-if="detail.field1">研究领域 : {{detail.field1.title}}</div></h2>
      <h2 v-if="detail"><div v-if="detail.journal">投稿杂志 : {{detail.journal.title}}</div></h2>
      <div v-if="dataAnalysis">
        <h2 v-if="dataAnalysis.group_num">分组数量：{{dataAnalysis.group_num.product.order}}</h2>
        <h2 v-if="dataAnalysis.sample_num">样本数量：{{dataAnalysis.sample_num.product.order}}</h2>
        <h2 v-if="dataAnalysis.data_service">数据分析服务：<span v-for="(item,index) in dataAnalysis.data_service" :key="index">{{item.product.title}}、</span></h2>
      </div>
      
      <div class="question">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="点击此处回答关于您文稿的问题" name="1">
            <h4>您是否有偏好的术语希望我们不要修改？</h4>
            <div class="lang">
              <el-input type="textarea" :rows="2" placeholder="" disabled v-model="textarea"></el-input>
            </div>
            <h4>您希望我们对您的图片进行哪种程度的更改？</h4>
            <div class="lang">
              <el-radio v-model="radioc" disabled label="1">仅修改图片以能满足期刊规定的要求即可。</el-radio>
              <el-radio v-model="radioc" disabled label="2">除了满足期刊的要求之外，进行其他你们认为能改善图片外观或清晰度的其他风格更改。</el-radio>
            </div>
            <h4>您希望我们如何在您的图片中使用颜色？</h4>
            <div class="lang">
              <el-radio v-model="radiod" disabled label="1">仅在我提供的彩色图片中使用彩色。</el-radio>
              <el-radio
                v-model="radiod"
                label="2"
                disabled
                class="but"
              >如果期刊对彩色图片收费，请尽可能将我提供的彩色图形和图表改成黑白色，以帮助我
                <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;降低成本。
              </el-radio>
              <el-radio
                v-model="radiod"
                label="3"
                disabled
                class="but"
              >如果期刊并不对彩色图片额外收费，请在你们认为可以改善图片外观和清晰度的情况下
                <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;，对所有的图形和图表中使用彩色。
              </el-radio>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="font">
        <p>金额：¥{{orderList.price}}</p>
        <p>时间：{{orderList.created_at}}</p>
      </div>
    </div>
    <div class="right" v-if="isActive">
      <div v-if="orderList.manuscripts">
        <div v-if="orderList.manuscripts[0]">
          <h1>手稿文件</h1>
          <div class="item" v-for="(item,index) in orderList.manuscripts" :key="index">
            <div class="headg">
              <p>{{item.title}}</p>
              <a :href="item.url">下载</a>
            </div>
            <div v-if="item.extra">
              <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="特别说明" :name="2+index">
                  <p style="text-decoration:underline">{{item.extra.background==0?'请仅编辑修改标示出的部分（如背景颜色标示，下划线标示等等）':'请不要编辑修改标示出的部分 （包括背景颜色标示，下划线标示等等）'}}</p>
                  <h6>{{item.extra.remark}}</h6>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </div>
      </div>
      <div v-if="orderList.charts">
        <div v-if="orderList.charts[0]">
          <h1>图表文件</h1>
          <div class="item" v-for="(item,index) in orderList.charts" :key="index">
            <div class="headg">
              <p>{{item.title}}</p>
              <a :href="item.url">下载</a>
            </div>
            <div v-if="item.extra">
              <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="特别说明" :name="3+index">
                  <p>{{item.extra.background==0?'请仅编辑修改标示出的部分（如背景颜色标示，下划线标示等等）':'请不要编辑修改标示出的部分 （包括背景颜色标示，下划线标示等等）'}}</p>
                  <h6>{{item.extra.remark}}</h6>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </div>
      </div>
      <div v-if="orderList.references">
        <div v-if="orderList.references[0]">
          <h1>其他文件</h1>
          <div class="item" v-for="(item,index) in orderList.references" :key="index">
            <div class="headg">
              <p>{{item.title}}</p>
              <a :href="item.url">下载</a>
            </div>
            <div v-if="item.extra">
              <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="特别说明" :name="4+index">
                  <p>{{item.extra.background==0?'请仅编辑修改标示出的部分（如背景颜色标示，下划线标示等等）':'请不要编辑修改标示出的部分 （包括背景颜色标示，下划线标示等等）'}}</p>
                  <h6>{{item.extra.remark}}</h6>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/vuex/store.js'
export default {
  data() {
    return {
      manuscript:[],//手稿列表
      isShow:false,//是否展开文稿问题
      detail:{},
      activeNames: [], 
      textarea:'',
      radioc:'',
      radiod:'',
      isActive:true,
    };
  },
  store,
  methods: {
    
    goExpand: function(res){
      this.manuscript[res].isShow = !this.manuscript[res].isShow
    },
    goQuestion: function(){
      this.isShow = !this.isShow
    },
    handleChange(val) {
      // console.log(val);
    },
  },
  computed: {
    //订单详情
    orderList(){
      let obj = this.$store.state.pdetail.detail
      this.detail = obj
      if(obj){
        this.textarea = obj.extra.terms
        this.radioc = obj.extra.image_level
        this.radiod = obj.extra.image_color
      }
      return this.$store.state.pdetail
    },
    dataAnalysis(){
      let arr = this.$store.state.pdetail.order_details
      if(arr){
        let obj = {}
        obj.analysis = arr.find(item=>item.product.group_slug == "data_analysis")
        obj.group_num = arr.find(item=>item.product.group_slug == "group_num")
        obj.sample_num = arr.find(item=>item.product.group_slug == "sample_num")
        obj.data_service = arr.filter(item=>item.product.group_slug == "data_service")
        console.log(obj)
        return obj
      }
    }
  },
  mounted () {
    // store.commit('changehref', 0)
    store.commit('changeactive', 0)
    if(sessionStorage.getItem('teamleave') == 0){
      this.isActive = false
    }
    // store.commit('changeactive', 0)
  }
};
</script>

<style lang='scss' scoped>
  .details{
    display: flex;
    width: 100%;
    height: 100%;
    margin-top: 0;
    overflow: auto;
  }
  .details::-webkit-scrollbar {
    width: 10px;
    height: 1px;
  }
  .details::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(181,181,181,1);
  }
  .details::-webkit-scrollbar-track {
    border-radius: 10px;
    background: transparent;
  }
  .question {
    width: 100%;
    background: #d6f0ee;
    padding: 0px 16px;
    box-sizing: border-box;
    align-items: center;
    margin-top: 20px;
    cursor: pointer;
    .hui {
      justify-content: space-between;
      display: flex;
    }
    & /deep/ .el-collapse-item__header{
      background: #d6f0ee;
      border: none;
    }
    & /deep/ .el-radio {
        display: block;
        margin-left: 0;
        margin-top: 10px;
      }
    & /deep/ .el-collapse-item__wrap{
      background: #d6f0ee;
    }
    h4 {
      margin-top: 20px;
      font-weight: bold;
    }
  }
  .middle{
    height: 100%;
    margin-left: 20px;
    width: calc(100%/2 - 0px);
    font-size: 14px;
    color: #515151;
    .head{
      display: flex;
      justify-content: space-between;
      align-items: center;
      >p{
        font-size: 14px;
        color: #515151;
      }
      div{
        margin-left: auto;
        p{
          width:70px;
          height:20px;
          background:rgba(86,175,247,1);
          border-radius:5px;
          text-align: center;
          line-height: 20px;
          font-size: 10px;
          color: #fff;
        }
      }
    }
    .wen{
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #515151;
    }
    >h1{
      margin-top: 30px;
    }
    >h2,div>h2{
      margin-top: 20px;
    }
    >h3{
      color: #56AFF7;
      margin-top: 20px;
      width: 100%;
      height: 36px;
      padding:0 14px;
      box-sizing: border-box;
      line-height: 36px;
      font-size: 14px;
      color: #515151;
      background: #D6F0EE;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
    }
    .font{
      display: flex;
      margin-top: 30px;
      align-items: center;
      justify-content: space-between;
    }
  }
  .right{
    height: 100%;
    width: calc(100%/2 - 0px);
    box-sizing: border-box;
    padding-left: 20px;
    div>h1{
      font-size: 16px;
      color: #515151;
      margin-bottom: 20px;
      font-weight: bold;
    }
    .item{
      box-sizing: border-box;
      margin-bottom: 20px;
      width: 100%;
      border:1px solid rgba(230,230,230,1);
      box-shadow:0px 3px 6px 0px rgba(155,155,155,0.06);
      border-radius:5px;
      padding: 14px;
      & /deep/ .el-collapse{
        border: none;
        .el-collapse-item__header{
          border: none;
        }
      }
      .headg{
        display: flex;
        justify-content: space-between;
        a{
          font-size: 12px;
          color: rgb(181,181,181);
        }
      }
      p{
        font-size: 14px;
        color: #515151;
      }
      .cont{
        display: flex;
        margin-top: 24px;
        margin-left: 14px;
        justify-content: space-between;
        align-items: center;
        h1{
          font-size: 12px;
          color: rgb(181,181,181);
          cursor: pointer;
        }
        div{
          display: flex;
          margin-right: 14px;
          align-items: center;
          margin-bottom: 10px;
          h2{
            width:120px;
            height:20px;
            background:rgba(86,176,248,1);
            border-radius:5px;
            font-size: 12px;
            color: #fff;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
          }
          
        }
      }
      .foot{
        display: none;
        width: 100%;
        padding: 14px;
        box-sizing: border-box;
        div{
          width: 100%;
          background: #FAFAFA;
          p{
            padding-top: 14px;
            margin-left: 14px;
            font-size: 14px;
            color: #515151;
          }
          h6{
            margin: 10px 14px 0;
            padding-bottom: 15px;
          }
        }
      }
      .foot.active{
        display: block;
      }
    }
  }
</style>